<template>
  <div class="l-rblock l-form-viewer" style="padding:8px;">
    <el-form :model="formData" :rules="rules" size="mini" labelPosition="right" labelWidth="80px" ref="form">
      <div class="l-auto-window ">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane class="l-tabs-container" :label="$t('接口信息')" name="tab0">
            <el-row :gutter="0">
              <div class="l-rblock">
                <el-col v-if="lr_formLookAuth('lr_other_logconfig_f_Name')" :span="24">
                  <el-form-item :label="$t('接口名称')" prop="lr_other_logconfig_f_Name">
                    <el-input :disabled="!lr_formEditAuth(
                      'lr_other_logconfig_f_Name',
                      isReadOnly
                    )
                      " :readonly="false" v-model="formData.lr_other_logconfig_f_Name" :placeholder="$t('请输入')">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col v-if="lr_formLookAuth('lr_other_logconfig_f_RequestMethod')" :span="24">
                  <el-form-item :label="$t('请求方式')" prop="lr_other_logconfig_f_RequestMethod">
                    <l-select :disabled="!lr_formEditAuth(
                      'lr_other_logconfig_f_RequestMethod',
                      false || isReadOnly
                    )
                      " :options="lr_other_logconfig_f_RequestMethodOptions"
                      v-model="formData.lr_other_logconfig_f_RequestMethod" />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <div>
                    <el-alert :title="$t('接口地址说明')" type="info" :description="$t(
                      '系统接口格式：/system/api/page，若是请求带有参数，请按照以下格式：/system/savedata/{@parame}/{@parame}。'
                    )
                      " show-icon :closable="false">
                    </el-alert>
                  </div>
                </el-col>
                <el-col v-if="lr_formLookAuth('lr_other_logconfig_f_Address')" :span="24">
                  <el-form-item :label="$t('接口地址')" prop="lr_other_logconfig_f_Address" style="margin-top: 14px;">
                    <el-input :disabled="!lr_formEditAuth(
                      'lr_other_logconfig_f_Address',
                      isReadOnly
                    )
                      " v-model="formData.lr_other_logconfig_f_Address" :placeholder="$t('请输入')">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col v-if="lr_formLookAuth('lr_other_logconfig_f_IsSecretFilter')" :span="24">
                  <el-form-item :label="$t('密级过滤')" prop="lr_other_logconfig_f_IsSecretFilter">
                    <el-switch :disabled="!lr_formEditAuth('lr_other_logconfig_f_IsSecretFilter')
                      " :activeValue="1" :inactiveValue="0" :active-text="$t('启用')" :inactive-text="$t('禁用')"
                      active-color="rgba(144, 240, 144, 0.5)" inactive-color="#C0CCDA"
                      v-model="formData.lr_other_logconfig_f_IsSecretFilter" />
                  </el-form-item>
                </el-col>
                <el-col v-if="lr_formLookAuth('lr_other_logconfig_f_EnabledMark')" :span="24">
                  <el-form-item :label="$t('接口状态')" prop="lr_other_logconfig_f_EnabledMark">
                    <el-switch :disabled="!lr_formEditAuth('lr_other_logconfig_f_EnabledMark')
                      " :activeValue="1" :inactiveValue="0" :active-text="$t('启用')" :inactive-text="$t('禁用')"
                      active-color="rgba(144, 240, 144, 0.5)" inactive-color="#C0CCDA"
                      v-model="formData.lr_other_logconfig_f_EnabledMark" />
                  </el-form-item>
                </el-col>
                <el-col v-if="lr_formLookAuth('lr_other_logconfig_f_MsgType')" :span="24">
                  <el-form-item :label="$t('描述类型')" prop="lr_other_logconfig_f_MsgType">
                    <l-radio :disabled="!lr_formEditAuth('lr_other_logconfig_f_MsgType', false || isReadOnly)"
                      :options="lr_other_logconfig_f_MsgTypeOptions" v-model="formData.lr_other_logconfig_f_MsgType" />
                  </el-form-item>
                </el-col>
                <el-col v-if="lr_formLookAuth('lr_other_logconfig_f_Description')" :span="24">
                  <el-form-item :label="$t('备注')" prop="lr_other_logconfig_f_Description">
                    <el-input type="textarea" :disabled="!lr_formEditAuth(
                      'lr_other_logconfig_f_Description',
                      isReadOnly
                    )
                      " :rows="7" v-model="formData.lr_other_logconfig_f_Description" :placeholder="$t('请输入')" />
                  </el-form-item>
                </el-col>
              </div>
            </el-row>
          </el-tab-pane>
          <el-tab-pane class="l-tabs-container" :label="$t('日志配置')" name="tab1">
            <el-row :gutter="0">
              <div class="l-rblock">
                <el-col v-if="lr_formLookAuth('1679992857319_96165')" :span="24">
                  <l-edit-table ref="lr_other_logscheme_table" addBtnText="undefined" :isAddBtn="true && !isReadOnly"
                    :isRemoveBtn="true && !isReadOnly" :isShowNum="true" :dataSource="lr_other_logscheme_data" :columns="lr_formTableAuth(
                      'lr_other_logscheme',
                      lr_other_logscheme_columns
                    )
                      " classType="element" @addRow="handleLr_other_logschemeAddRow"
                    @deleteRow="handleLr_other_logschemeDeleteRow" style="margin-top: 14px;">
                    <template v-slot:f_TableName="scope">
                      <el-input size="mini" :disabled="!lr_formTableEditAuth(
                        'lr_other_logscheme',
                        'f_TableName',
                        isReadOnly
                      )
                        " v-model="scope.row.f_TableName" :placeholder="$t('请输入')">
                      </el-input>
                    </template>
                    <template v-slot:f_FullName="scope">
                      <el-input size="mini" :disabled="!lr_formTableEditAuth(
                        'lr_other_logscheme',
                        'f_FullName',
                        isReadOnly
                      )
                        " v-model="scope.row.f_FullName" :placeholder="$t('请输入')">
                      </el-input>
                    </template>
                    <template v-slot:f_EnCode="scope">
                      <el-input size="mini" :disabled="!lr_formTableEditAuth(
                        'lr_other_logscheme',
                        'f_EnCode',
                        isReadOnly
                      )
                        " v-model="scope.row.f_EnCode" :placeholder="$t('请输入')">
                      </el-input>
                    </template>
                    <template v-slot:f_DataItemCode="scope">
                      <l-tree-select :disabled="!lr_formTableEditAuth(
                        'lr_other_logscheme',
                        'f_DataItemCode',
                        false || isReadOnly
                      )
                        " v-model="scope.row.f_DataItemCode" :options="lr_dataItemClassifysTree"
                        :placeholder="$t('请选择数据字典')" size="mini">
                      </l-tree-select>
                    </template>
                    <el-table-column label="操作" :width="48">
                      <template slot-scope="scope">
                        <el-button type="text" size="mini" @click.stop="
                          handleTableClick(scope.$index, scope.row)
                          ">
                          {{ $t("设置") }}
                        </el-button>
                      </template>
                    </el-table-column>
                  </l-edit-table>
                </el-col>
              </div>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-form>
    <!-- 设置字段属性 -->
    <l-dialog :title="$t(`设置字段属性`)" :visible.sync="formVisible" @ok="handleSave" @close="handleCloseForm"
      @opened="handleOpenedForm">
      <div class="l-from-body">
        <el-form :model="formData2" :rules="rules2" size="mini" ref="form2" label-width="80px">
          <el-form-item label="字段" prop="f_FullName">
            <el-input readonly v-model="formData2.f_FullName"></el-input>
          </el-form-item>
          <el-form-item label="关联类型" prop="f_RelationType">
            <l-select :placeholder="$t('请选择')" :options="relationTypeOptions" v-model="formData2.f_RelationType"
              @change="handleRelationChange">
            </l-select>
          </el-form-item>
          <!-- 数据字典 -->
          <el-form-item v-if="formData2.f_RelationType == 1" label="数据选项" prop="f_DataItemCode">
            <l-tree-select :placeholder="$t('请选择')" :options="lr_dataItemClassifysTree"
              v-model="formData2.f_DataItemCode">
            </l-tree-select>
          </el-form-item>
          <!-- 数据视图 -->
          <el-form-item v-if="formData2.f_RelationType == 2" label="数据视图" prop="f_DSourceCode">
            <l-select :placeholder="$t('请选择')" :options="lr_dataSource" labelKey="f_Name" valueKey="f_Code"
              v-model="formData2.f_DSourceCode" @change="handleDataSourceChange">
            </l-select>
          </el-form-item>
          <el-form-item v-if="formData2.f_RelationType == 2" label="关联字段" prop="f_DSourceRelevance">
            <l-select :placeholder="$t('请选择')" :options="colNames" v-model="formData2.f_DSourceRelevance">
            </l-select>
          </el-form-item>
          <el-form-item v-if="formData2.f_RelationType == 2" label="显示字段" prop="f_DSourceReveal">
            <l-select :placeholder="$t('请选择')" :options="colNames" v-model="formData2.f_DSourceReveal">
            </l-select>
          </el-form-item>
        </el-form>
      </div>
    </l-dialog>
  </div>
</template>
<script>
const api = window.$api.system.logconfig;

export default {
  props: {
    isReadOnly: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      moduleCode: "learun_logconfig",
      activeName: "tab0",
      formData: {
        lr_other_logconfig_f_Name: "", // 接口名称
        lr_other_logconfig_f_Address: "", // 接口地址
        lr_other_logconfig_f_RequestMethod: "", // 请求方式
        lr_other_logconfig_f_EnabledMark: 1, //有效标志(1正常，0禁用)
        lr_other_logconfig_f_Description: "", // 备注
        lr_other_logconfig_f_IsSecretFilter: 0, // 是否启用密级过滤(0否，1是)
        lr_other_logconfig_f_MsgType: 1, // 描述保存类型
      },
      rules: {
        lr_other_logconfig_f_Name: [
          { required: true, message: this.$t("请输入接口名称") },
        ],
        lr_other_logconfig_f_Address: [
          { required: true, message: this.$t("请输入接口地址") },
          {
            validator: this.lr_existDbFiled,
            fieldName: "f_Address",
            keyValue: () => {
              return this.formData.lr_other_logconfig_f_Id;
            },
            filedsJsonName:'fileNameForm_filedsJson',
            tableName: "lr_other_logconfig",
            keyName: "f_Id",
          },
        ],
        lr_other_logconfig_f_RequestMethod: [
          { required: true, message: this.$t("请选择请求方式") },
        ],
      },
      lr_other_logscheme_columns: [
        {
          id: "lr_other_logscheme_F_TableName",
          prop: "f_TableName",
          label: this.$t("数据库名称"),
          required: true,
        },
        {
          id: "lr_other_logscheme_F_FullName",
          prop: "f_FullName",
          label: this.$t("名称"),
          required: true,
        },
        {
          id: "lr_other_logscheme_F_EnCode",
          prop: "f_EnCode",
          label: this.$t("编码"),
          required: true,
        },
        {
          id: "lr_other_logscheme_F_DataItemCode",
          prop: "f_DataItemCode",
          label: this.$t("数据字典关联项"),
        },
      ],
      lr_other_logscheme_data: [],

      //日志效果展示
      description: this.$t("日志效果展示"),

      //日志配置-设置
      formVisible: false,
      formEditRow: null,
      formEditIndex: 0,
      formData2: {
        f_FullName: "",
        f_RelationType: 0,
        f_DataItemCode: "",
        f_DSourceCode: "",
        f_DSourceRelevance: "",
        f_DSourceReveal: "",
      },
      lr_other_logconfig_f_MsgTypeOptions: [
        { label: this.$t("全部"), value: 1 },
        { label: this.$t("仅操作前"), value: 2 },
        { label: this.$t("仅操作后"), value: 3 },
      ],
      rules2: {
        f_RelationType: [{ required: true, message: "请输选择关联类型" }],
        f_DataItemCode: [{ required: true, message: "请选择数据字典" }],
        f_DSourceCode: [
          { required: true, message: "请选择数据视图", trigger: "blur" },
        ],
        f_DSourceRelevance: [
          { required: true, message: "请选择关联字段", trigger: "blur" },
        ],
        f_DSourceReveal: [
          { required: true, message: "请选择显示字段", trigger: "blur" },
        ],
      },
      relationTypeOptions: [
        { value: 0, label: "无关联" },
        { value: 1, label: "数据字典" },
        { value: 2, label: "数据视图" },
        { value: 3, label: "公司信息" },
        { value: 4, label: "部门信息" },
        { value: 5, label: "用户信息" },
      ],
      colNames: [],
    };
  },
  computed: {
    lr_other_logconfig_f_RequestMethodOptions() {
      this.lr_loadDataItem("RequestMethod");
      return this.lr_dataItemOptions(this.lr_dataItem["RequestMethod"]);
    },
    fileNameForm_filedsJson(){
      console.log("this.formData.lr_other_logconfig_f_RequestMethod",this.formData.lr_other_logconfig_f_RequestMethod);
      return {f_RequestMethod:this.formData.lr_other_logconfig_f_RequestMethod}
    }
  },
  mounted() {
    this.lr_loadDataItemClassifys();
    this.lr_loadDataSourceList();
  },
  methods: {
    handleLr_other_logschemeAddRow() {
      let point = {};
      point.f_TableName = "";
      point.f_FullName = "";
      point.f_EnCode = "";
      point.f_RelationType = 0;
      point.f_DataItemCode = "";
      point.f_DSourceCode = "";
      point.f_DSourceRelevance = "";
      point.f_DSourceReveal = "";
      this.lr_other_logscheme_data.push(point);
    },
    handleLr_other_logschemeDeleteRow(event) {
      this.lr_other_logscheme_data.splice(event.index, 1);
    },
    // 重置表单
    resetForm() {
      this.$formClear(this.$refs.form);
      this.activeName = "tab0";
      this.lr_other_logscheme_data = [];
    },
    // 校验表单
    async validateForm() {
      if (!(await this.$formValidateWraper(this.$refs.form))) {
        return false;
      }
      if (!this.$refs.lr_other_logscheme_table.validate()) {
        return false;
      }

      return true;
    },
    // 设置表单数据
    setForm(data) {
      this.$setFormData(
        this.formData,
        data.lrOtherLogconfigEntity,
        "lr_other_logconfig"
      );
      this.lr_other_logscheme_data = data.lrOtherLogschemeList;
    },
    // 获取表单数据
    getForm() {
      const formData = {};
      formData.lrOtherLogconfigEntity = this.$getFormData(
        this.formData,
        "lr_other_logconfig"
      );
      formData.lrOtherLogschemeList = this.lr_other_logscheme_data;
      return formData;
    },

    async loadFormData({ keyValue /*,params,node*/ }) {
      //  keyValue 流程中相当于流程processId,params 传递参数,node 流程节点
      const data = await this.$awaitWraper(api.get(keyValue));
      if (data) {
        this.setForm(data);
        return true;
      } else {
        return false;
      }
    },

    async saveForm({ keyValue, isEdit /*,code,node*/ }) {
      // isEdit 是否更新数据, keyValue 流程中相当于流程processId,code 表示流程中的操作码,node 流程节点
      const postData = this.getForm();
      console.log("postData", postData);
      if (isEdit) {
        // 编辑
        return await this.$awaitWraper(api.update(keyValue, postData));
      } else {
        // 新增
        postData.lrOtherLogconfigEntity.f_Id = keyValue;

        return await this.$awaitWraper(api.add(postData));
      }
    },
    //日志配置描述
    formatText(type, row) {
      switch (type) {
        case 0: //无关联
          return "无关联";
        case 1: //数据字典
          return "数据字典";
        case 2: //数据视图
          return "数据视图/" + row.f_DSourceCode;
        case 3: //公司信息
          return "公司信息";
        case 4: //部门信息
          return "部门信息";
        case 5: //用户信息
          return "用户信息";
        default:
          return "无关联";
      }
    },
    //设置
    handleTableClick($index, row) {
      this.formVisible = true;
      this.formEditRow = row;
      this.formEditIndex = $index;
    },
    handleSave() {
      this.$refs.form2.validate((valid) => {
        if (valid) {
          this.$set(
            this.lr_other_logscheme_data,
            this.formEditIndex,
            this.$deepClone(this.formData2)
          );
          this.formVisible = false;
        }
      });
    },
    handleCloseForm() {
      this.$refs.form2 && this.$refs.form2.resetFields();
    },
    handleOpenedForm() {
      this.formData2 = this.$deepClone(this.formEditRow);
    },
    handleRelationChange() {
      this.formData2.f_DataItemCode = "";
      this.formData2.f_DSourceCode = "";
      this.formData2.f_DSourceRelevance = "";
      this.formData2.f_DSourceReveal = "";
    },
    async handleDataSourceChange(item) {
      if (this.$validatenull(item)) {
        this.formData2.f_DSourceRelevance = "";
        this.formData2.f_DSourceReveal = "";
        this.colNames = [];
      } else {
        await this.lr_loadDataSourceColNames(item.f_Code, false);
        const _data = this.lr_dataSourceCol[item.f_Code].map((t) => {
          return { value: t, label: t };
        });
        this.colNames = _data;
        this.formData2.f_DSourceRelevance = _data[0].value;
        this.formData2.f_DSourceReveal = _data[0].value;
      }
    },
  },
};
</script>
